<template>
  <loading-global_2 v-if="loading"/>
  <a-layout>
    <a-affix :offset-top=0>
      <a-layout-header :style="{ backgroundColor: 'rgba(255,255,255,0.6)', padding: 0,boxShadow:'1px 1px 3px #a6a6a6'}">
        <a-row type="flex" justify="end">
          <a-col :flex="1"  style="font-size: 20px;text-align: center;color: #666666;">
              <strong >Golxen个人博客</strong>
          </a-col>

          <a-col :flex="20"/>

          <a-col :flex="1" >
            <MenuHome v-if="overflowed"/>
            <DropdownHome v-else/>
          </a-col>
        </a-row>
      </a-layout-header>
    </a-affix>

    <a-layout-content :style="{ marginTop:'24px',minHeight:'100vh'}">
    <a-row :gutter="24" justify="center">

      <a-col :span="5" v-if="overflowed">
        <LeftHome/>
      </a-col>

      <a-col  :span="span" >
        <router-view/>
      </a-col>

    </a-row>
    </a-layout-content>

    <a-layout-footer style="text-align: center;background-color: #098081">
    <a-row justify="center">
      <a-col>
          Golxen ©2022 Created by Ant UED<br/>
        闽ICP备2022005686号
      </a-col>
    </a-row>
    </a-layout-footer>

  </a-layout>
</template>

<script setup>

import {useRouter} from "vue-router";
import {onMounted, ref, watch} from "vue";
import MenuHome from "@/components/visitor/home/MenuHome";
import DropdownHome from "@/components/visitor/home/DropdownHome";
import request from "@/utils/request";
import {useStore} from "vuex";
import LeftHome from "@/components/visitor/home/LeftHome";
import LoadingGlobal_2 from "@/components/utils/loadingGlobal_2";

const router=useRouter()
const content = ref();
const span=ref(15)
const loading=ref(false)
const overflowed=ref(true)
const screenWidth=ref(document.body.clientWidth)
const store=useStore()
const pageListVo=ref({
  limit:8,
  page:1
})
const categoryAndCount=ref([])



async function windowOnresize() {
  window.onresize= () => {
    return (() => {
      window.screenWidth = document.body.clientWidth;
      screenWidth.value = window.screenWidth;
    })();
  }
  if (screenWidth.value<=1420){
    overflowed.value=false
    span.value=24
    console.log(overflowed.value)
  } else {
    overflowed.value=true
    span.value=15
    console.log(overflowed.value)
  }
}
onMounted(()=>{
  loading.value=true
  Promise.all([
  windowOnresize(),

  request.get("admin/get/avatar").then(res=>{
    console.log("Avatar  :",res)
    store.commit("setAvatar",res.data)
  }),

  request.get("admin/get/signature").then(res=>{
    console.log("Signature  :",res)
    store.commit("setSignature",res.data)
  }),

  request.get("admin/get/resume").then(res=>{
    console.log("Resume  :",res)
    store.commit("setResume",res.data)
  }),

  request.get("essay/getallcount").then(res=>{
    console.log("AllCount  :",res)
    store.commit("setAllCount",res.data)
  }),
  request.post("essay/getlist",pageListVo.value).then(res=>{
    console.log("EssayList  :",res)
    store.commit("setEssayList",res.data)
  }),
  request.get("category/getlist").then(res=>{
    console.log("category  :",res)
    res.data.forEach((ivalue)=>{
      getCategoryCount(ivalue).then(res=>{
        categoryAndCount.value.push({category:ivalue,count:res})
        // console.log("categoryAndCount  :",categoryAndCount.value)

      })
    })
  }),
  request.get("label/get/all").then(res=>{
    console.log("LabelSet  :",res.data)
    store.commit("setLabelSet",res.data)
  }),
  request.get("essay/getDate").then(res=>{
    console.log("DateList  : ",res)
    store.commit("setDateList",res.data)
  })
  ]).then(()=> {
    store.commit("setCategoryList",categoryAndCount.value)
    loading.value = false
  })
})

function getCategoryCount(category) {
  return request.get("essay/getcountbycategory/"+category).then(res=>{
    console.log(res)
    return res.data
  })
}

watch(screenWidth,(now)=>{
  if (now<=1420){
    overflowed.value=false
    span.value=24
    console.log(overflowed.value)
  }else {
    overflowed.value=true
    span.value=15
    console.log(overflowed.value)
  }
})

const handleClick=(item)=>{
  console.log(item)
  router.push(item.key)
}
const onCollapse = (collapsed, type) => {
  console.log(collapsed, type);
};

const onBreakpoint = broken => {
  console.log(broken);
};



</script>

<style>
/*html,body{ width: 100%; height: 100%; }*/
/*html::-webkit-scrollbar, body::-webkit-scrollbar{width:0px;height:0px;}*/
/*body{margin:0;}*/


</style>